<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <style >
        div{
            padding-left: 20px ;
        }
    </style>
</head>
<body>
<div >
    <input class="a" value="1" type="checkbox" name="tt">a
    <div>
        <input class="a1" value="2" type="checkbox" name="r">a123 <br>
        <input class="a1" value="3" type="checkbox" name="t">a1234 <br>
        <input class="a1" value="4" type="checkbox" name="y">a12345 <br>
    </div>
</div>
<button type="button" id="hj">123132</button>
<script>
function treeOne() {
    $(".a").on("change",function () {
        var childrenC=document.querySelectorAll(".a"+"1");
        if(this.checked){
            this.setAttribute("checked","checked");
            for(var i=0,iLength=childrenC.length;i<iLength;i++){
                childrenC[i].setAttribute("checked","checked");
            }
        }else{
            for(var i=0,iLength=childrenC.length;i<iLength;i++){
                childrenC[i].removeAttribute("checked");
            }
            this.removeAttribute("checked");
        }
    });
    $(".a"+"1").on("change",function () {
        var checkState=false;
        if(this.checked){
            $(this).attr("state",true);
            $(".a").prop("checked",true).attr("state",true);

        }else{
            $(this).attr("state",false);
        }
        $(".a"+"1").each(function () {
            if($(this).prop("checked")){
                checkState=true;
                return false;
            }
        });
        if(!checkState){
            $(".a").prop("checked",false).attr("state",false);
        }
    });
    $("#hj").on("click",function () {
        var empty=[];
        $("[state=true]").each(function () {
            empty.push($(this).val());
        })
        console.log(empty);
    })
}
treeOne()

</script>
</body>
</html>